<template>
  <transition :name="transition">
    <div v-show="modelValue" class="cesium-panel" :style="panelStyle">
      <div class="panel-header">
        <span>{{ title }}</span>
        <div class="header-buttons">
          <slot name="header-buttons"></slot>
        </div>
      </div>
      <div class="panel-content">
        <slot></slot>
      </div>
      <div class="panel-footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  width: {
    type: [String, Number],
    default: '400px'
  },
  transition: {
    type: String,
    default: 'slide-fade'
  }
})

const panelStyle = computed(() => ({
  width: typeof props.width === 'number' ? `${props.width}px` : props.width
}))
</script>

<style scoped lang="scss">
.cesium-panel {
  background: rgba(38, 38, 38, 0.95);
  border: 1px solid #444;
  border-radius: 4px;
  color: #edffff;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;

    .header-buttons {
      display: flex;
      gap: 8px;
    }
  }

  .panel-content {
    :deep(.cesium-input) {
      background: #1a1a1a;
      border: 1px solid #444;
      color: #edffff;
      width: 100%;
      
      &:focus {
        border-color: #409eff;
      }

      &.error {
        border-color: #f56c6c;
      }
    }
  }

  .panel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #444;
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}
</style> 